<template>
  <div class="continer">
    <div class="header">
      <!-- 查询 -->
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="查询用户名称">
          <el-input
            v-model="form.userId"
            placeholder="请输入查询用户id"
          ></el-input>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="showname()"
          >查询</el-button
        >
      </el-form>
    </div>
    <div class="center">
      <!-- 空状态 -->
      <div class="empty" v-if="records.length == 0">
        <el-empty description="暂无签名"></el-empty>
      </div>
      <!-- 签名展示 -->
      <div v-else class="box" v-for="item in records" :key="item.id">
        <div class="box-header">
          <i class="el-icon-close" @click="deleteName(item.id)"></i>
        </div>
        <div class="box-center">
          <img class="img" :src="ip + item.imgUrl" alt="" />
          <p class="name">{{ item.userName }}</p>
          <p class="sort">{{ item.job }}</p>
          <el-button class="button" type="text" @click="dialogVisible = true">{{
            item.sort
          }}</el-button>

          <el-dialog
            title="修改优先级"
            :visible.sync="dialogVisible"
            @close="setRoleDialogClosed"
          >
            <el-form :model="form1">
              <el-form-item label="优先级" :label-width="formLabelWidth">
                <el-select v-model="form1.sort" placeholder="请选择优先级">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="getChangeRank(item.id, item.userId)"
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <p class="time">{{ item.createTime }}</p>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="now"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
import { GetUserDetail, GetIP, GetDelete, GetChangeRank } from "../api";
export default {
  name: "ShowName",
  data() {
    return {
      form: {
        userId: "", //用户id
      },
      now: 1, //页数
      size: 10, //每页的请求数据
      records: [], //请求数组
      ip: GetIP,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      total: 0, //总数据
      dialogVisible: false, //dialog开关
      formLabelWidth: "120px",
      form1: {
        sort: "", //用户优先级
      },
    };
  },
  methods: {
    // 获取数据
    showname() {
      GetUserDetail({
        now: this.now,
        size: this.size,
        userId: this.form.userId,
      }).then((res) => {
        if (res.status == 200) {
          // console.log(res);
          this.$message.success("获取数据成功");
          this.records = res.data.data.records;
          this.total = res.data.data.total;
          this.form.userId = "";
        } else {
          this.$message.error("获取数据失败");
        }
      });
    },
    // 页数
    handleSizeChange(newSize) {
      this.size = newSize;
      this.showname();
    },

    handleCurrentChange(newPage) {
      this.now = newPage;
      this.showname();
    },

    //删除签名
    deleteName(id) {
      GetDelete({ signId: id }).then((res) => {
        if (res.status == 200) {
          this.$message.success(res.data.msg);
          this.$router.go(0);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    // 修改优先级
    getChangeRank(id, userId) {
      GetChangeRank({
        sort: this.form1.sort,
        signId: id,
      }).then((res) => {
        if (res.status == 200) {
          this.$message.success(res.data.msg);
          this.dialogVisible = false;
          GetUserDetail({
            now: this.now,
            size: this.size,
            userId: userId,
          }).then((res) => {
            if (res.status == 200) {
              this.$message.success("获取数据成功");
              this.records = res.data.data.records;
              this.total = res.data.data.total;
              this.form.userId = "";
            } else {
              this.$message.error("获取数据失败");
            }
          });
        }
      });
    },

    // 清除表格内容
    setRoleDialogClosed() {
      this.form1.userId = "";
    },
  },
};
</script>

<style scoped>
.continer {
  margin-top: 30px;
  margin-left: 20px;
}
.continer .center {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.box {
  width: 300px;
  height: 435px;
  background-color: #eb7072;
  border-radius: 5%;
  margin-top: 100px;
  margin-right: 25px;
}
.img {
  width: 280px;
  height: 220px;
  margin: 10px;
  text-align: center;
  border-radius: 5%;
}
.time {
  margin-left: 10px;
  margin-right: 10px;
  color: white;
}
.name {
  margin-left: 10px;
  margin-right: 10px;
  color: white;
}
.job {
  margin-left: 10px;
  margin-right: 10px;
  color: white;
  cursor: pointer;
}
.sort {
  margin-left: 10px;
  margin-right: 10px;
  color: white;
}
.pagination {
  float: right;
}
.el-icon-close {
  display: none;
  float: right;
  margin-right: 5px;
  margin-top: 5px;
  cursor: pointer;
}
.box:hover .el-icon-close {
  display: block;
}
.button {
  color: white;
  margin-left: 10px;
}
</style>
